<Meta name=viewport content=width=device-width, initial-scale=1, minimum-scale=1>

HTML5 | Метатег Viewport

Метатег Viewport

Последнее обновление: 03.05.2016

Прежде всего рассмотрим один из ключевых моментов применения адаптивного дизайна - метатег viewport (по сути с этого тега и начивается адаптиный дизайн). Пусть для начала у нас есть следующая веб-страница:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Обычная веб-страница</title> </head> <body> <h3>Обычная веб-страница</h3> </body> </html>

Это стандартная веб-страница, которая в обычном браузере будет выглядеть следующим образом:

Однако если мы запустим ту же самую веб-страницу в эмуляторе мобильного устройства или на реальном мобильном устройстве, то мы с трудом сможем прочитать, что же на ней написано:

Применяя масштабирование, пользователь может наконец-то увидеть, что же там все таки написано. Однако это не очень удобно. При этом веб-страница имеет много пустого места, что не очень красиво.

Почему так происходит? Дело в том, что каждый мобильный браузер задает странице некоторые начальные размеры и потом пытается приспособить под размеры экрана текущего мобильного устройства.

Вся видимая область на экране браузера описывается понятием Viewport. По сути viewport представляет область, в которую веб-браузер пытается "впихнуть" веб-страницу. Например, браузер Safari на iPone и iPod определяет ширину viewport по умолчанию равной 980 пикселям. То есть, получив страницу и вписав в viewport с шириной 980 пикселей, браузер сжимает ее до размеров мобильного устройства. Например, если ширина экрана смартфона составляет 320 пикселей, то до этого размера потом будет сжата страница. И ко всем элементам страницы будет применен коэффициент масштабирования, равный 320/980.

Почему в данном случае используется именно 980 пикселей, а, скажем, не реальный размер экрана? Все дело в том, что по умолчанию браузер считает, что каждая веб-страница предназначена для десктопов. А обычной шириной десктопного сайта можно считать 980 пикселей.

При этом для каждого браузера устанавливается своя ширина области viewport, необязательно 980 пикселей. Другие браузеры могут поддерживать в качестве начальной ширины другие значения. Но они также будут выполнять масштабирование.

Чтобы избежать подобной не очень приятной картины, следует использовать метатег viewport. Он имеет следующее определение:

В атрибуте content мета-тега мы можем определить следующие параметры:

Параметр	Значения	Описание
width	Принимает целочисленное значение в пикселях или значение device-width	Устанавливает ширину области viewport
height	Принимает целочисленное значение в пикселях или значение device-height	Устанавливает высоту области viewport
initial-scale	Число с плавающей точкой от 0.1 и выше	Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования
user-scalable	no/yes	Указывает, может ли пользователь с помощью жестов масштабировать страницу
minimum-scale	Число с плавающей точкой от 0.1 и выше	Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования
maximum-scale	Число с плавающей точкой от 0.1 и выше	Задает максимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования

Теперь изменим предыдущий пример веб-страницу, использовав метатег:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Обычная веб-страница</title> </head> <body> <h3>Обычная веб-страница</h3> </body> </html>

Веб-страничка определенно выглядит лучше благодаря использованию метатега viewport. Используя параметр width=device-width мы говорим веб-браузеру, что в качестве начальной ширины области viewport надо считать не 980 пикселей или какое-то другое число, а непосредственную ширину экрана устройства. Поэтому затем веб-браузер не будет проводить никакого масштабирования, так как у нас ширина viewport и ширина одинаковы.

Мы также можем использовать другие параметры, например, запретить пользователю масштабировать размеры страницы:

metanit.com

Метатег Viewport

Последнее обновление: 31.10.2015

Очевидно, что размеры экрана мобильных устройств ставят перед нами одну из наиболее важных проблем при создании сайта для мобильных устройств. В данном случае избежать этой проблемы нам поможет тег Viewport. Возьмем, к примеру, следующую разметку:

<!doctype html> <html> <head> <title>Обычный сайт</title> </head> <body> <h3>Это обычный сайт</h3> </body> </html>

Запустив данную страничку в эмуляторе Opera Mobile, получим следующую картину:

Используя масштабирование, пользователь может наконец-то увидеть, что же там все таки написано. Однако это не очень удобно. При этом сайт страница имеет много пустого места, что не очень красиво.

Вся видимая область на экране браузера описывается понятием Viewport. По сути viewport представляет область, в которую веб-браузер пытается "впихнуть" веб-страницу. Например, браузер Safari на iPone и iPod определяет ширину viewport по умолчанию равной 980 пикселям. Затем, получив страницу с сервера и вписав в viewport с шириной 980 пикселей, браузер сжимает ее до размеров мобильного устройства. Например, если ширина экрана смартфона составляет 320 пикселей, то до этого размера потом будет сжата страница. И ко всем элементам страницы будет применен коэффициент масштабирования, равный 320/980.

При этом для каждого браузера устанавливается своя ширина области viewport, необязательно 980 пикселей, например, IE поддерживает в качестве начальной ширины 1024 пикселя. Но общая картина будет та же.

Чтобы избежать подобной не очень приятной картины, следует использовать метатег viewport. Использование этого метатега во многом даст понять браузеру, что он имеет дело не с десктопной страницей, а предназначенной в том числе и для мобильных устройств.

Общее объявление метатега следующее:

В атрибуте content мета-тега мы можем определить следующие параметры:

Параметр	Значения	Описание
width	Принимает целочисленное значение в пикселях или значение device-width	Устанавливает ширину области viewport
height	Принимает целочисленное значение в пикселях или значение device-height	Устанавливает высоту области viewport
initial-scale	Число с плавающей точкой от 0.1 и выше	Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования
user-scalable	no/yes	Указывает, может ли пользователь с помощью жестов масштабировать страницу
minimum-scale	Число с плавающей точкой от 0.1 и выше	Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования
maximum-scale	Число с плавающей точкой от 0.1 и выше	Задает максимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования

Теперь изменим предыдущий пример веб-страницу, использовав метатег:

<!doctype html> <html> <head> <title>Обычный сайт</title> <meta name="viewport" content="width=device-width"> </head> <body> <h3>Это обычный сайт</h3> </body> </html>

metanit.com

Мета-теги и адаптивная верстка. Бесплатный урок от учебного центра.

Мета-теги и адаптивная верстка

Не так давно я закончил цикл статей, в которых рассказывал о разных мета-тегах и их месте в современной верстке. Продолжая начатую тему решил написать еще один материал, посвященный meta name=»viewport», о котором вскользь было упомянуто во второй статье цикла, где отмечалось, что данная конструкция активно используется в адаптивности, позволяя масштабировать страницу под конкретные размеры устройства.

При сравнении мобильных и десктопных браузеров наиболее очевидное различие — размер экрана. Мобильные браузеры по умолчанию отображают сайты, созданные для обычных десктопных браузеров, гораздо хуже, чем могли бы: либо путем уменьшения масштаба, делая текст и другой контент слишком мелким и нечитаемым, либо отображая лишь небольшую часть сайта, которая умещается на экране.

Если подумать логически, то в этом есть смысл: мобильный браузер видит страницу и предполагает, что она создана для десктопной версии браузера, что верно для подавляющего числа сайтов. Исходя из этого, этот браузер задает странице ширину 980px (Safari iPhone) и пытается оптимально уместить ее на экране смартфона, отобразив в максимально уменьшенном масштабе. Обычно ширина сайтов примерно такой и является, поэтому открыв среднестатистическую веб-страницу на мобильном устройстве, она растянется на всю свою ширину, но меньше в 2-3 раза своего оригинального размера.

Поэтому, если мы хотим оптимизировать сайт для смартфонов, этот вариант не совсем годится. Нужно каким-нибудь образом сообщить браузеру, что наша страница предназначена для отображения на мобильных устройствах и задать правила для правильного поведения области просмотра.

Как раз для этого и используется мета-тег viewport, который был введен компанией Apple. Общий вид записи данного тега ничем не отличается от аналогичных конструкций:

Особенно дотошные читатели могут заметить, что meta name в основном используется для рекомендаций поисковым системам. А meta name="viewport" — это инструкция для браузера, которую было бы логичнее указывать в meta http-equiv. Так и есть, однако, с развитием html и появлением новых конструкций мы можем наблюдать некоторое размытие функционального разделения тегов. И с такими примерами мы уже сталкивались, когда рассматривали meta property (достаточно вспомнить <meta name="twitter:title" content="Название страницы"> ). Особенного противоречия или технической «нестройности» в этом нет. HTML, как любой другой язык, развивается повинуясь необходимости в новых конструкциях. Старые же либо выходят из употребления, либо наполняются новым смыслом. (Любой филолог может прочитать вам целую лекцию о таких процессах в человеческих языках, но это выходит за рамки рассматриваемой нами темы)

Думаю, ни у кого не вызывает сомнений факт отмирания meta name. Современные поисковые системы практически не нуждаются в каких-либо «рекомендациях» (тем более, что их достоверность всегда вызывала сомнения). Поэтому мы являемся свидетелями того, как старая конструкция, утрачивает свое первоначальное значение, приобретая новое актуальное.

И так, какие значения может принимать атрибут content в связке с name="viewport" .

Данная запись как раз позволяет указать браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по умолчанию. На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме). Можно задать самостоятельно ширину в 320px, что даст тот же результат, но на некоторых смартфонах ширина экрана может быть другой, поэтому самый оптимальный вариант — использовать именно device-width.

Атрибут content может содержать сразу несколько значений, в таком случае они отделяются друг от друга запятой. Так, одним из самых распространенных вариантов определения области просмотра является следующий вариант:

который определяет ширину страницы и задает начальный масштаб.

Также, часто можно встретить такой вариант:

В таком случае странице задается ширина устройства, на котором она открыта, а также запрещается любое масштабирование — как начальное при загрузке, так и пользовательское — уже после нее. В таком режиме мобильная веб-страница функционирует как мобильное приложение, где пользователю доступен только вертикальный или горизонтальный скролл. Однако такую запись лучше не использовать слепо, ибо нельзя запрещать пользователю уменьшать и увеличивать масштаб по своему желанию, если того не требует дизайнерская задумка. К примеру, слишком малый шрифт ухудшает читабельность текста и в таком случае необходимо использовать приближение.

Строго говоря, в атрибуте content мы можем встретить следующие записи:

Атрибут	Возможное значение	Описание
width	Целое неотрицательное значение(от 200px — 10,000px)или константа device-width.	Определяет ширину viewport.Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px.
height	Целое неотрицательное значение(от 223px до 10,000px)или константа deviceheight	Определяет высоту viewport. В большинстве случаев на этот атрибут можно не обращать внимание
initial-scale	Число с точкой (от 0.1 до 10).Значение 1.0 — не масштабировать	Определяет начальный масштаб страницы. Чем больше число, тем выше масштаб.
user-scalable	no или yes	Определяет, может ли пользователь изменять масштаб в окне.По умолчанию “yes” в мобильном Safari.
minimum-scale	Число с точкой (от 0.1 до 10).1.0 — не масштабировать	Определяет минимальный масштаб viewport. По умолчанию “0.25” в мобильном Safari.
maximum-scale	Число с точкой (от 0.1 до 10).1.0 — не масштабировать	Определяет максимальный масштаб viewport. По умолчанию “1.6” в мобильном Safari.

Как уже было сказано в одной из предыдущих статей, разные производители мобильных устройств могут требовать дополнительных конструкций, которые управляют отображением страницы. (в этом они лишь следуют тренду, установленному компанией Apple)

Так, у устройств на платформе Android есть свой атрибут для viewport, который выключает масштабирование для дисплеев с различным разрешением.

На устройствах с HDPI (240dpi) не будет масштабирования.

На устройствах с MDPI (160dpi) не будет масштабирования. Такое значение dpi установлено по умолчанию.

На устройствах с LDPI (120dpi) не будет масштабирования

Такая запись означает, что не будет масштабирования ни на каком из устройств на Android.

meta name=»viewport» – достаточно гибкая конструкция, которая, при правильном использовании, открывает широкие перспективы для всякого рода «трюкачества» и позволяет добиться хороших результатов при верстке сайтов, изначально не ориентированных на адаптивность. Рассмотрим такой пример.

По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш дизайн может плохо соответствовать данному диапазону. Значение может быть для шаблона слишком большим или маленьким. Это неизбежно приведет к тому, что часть страницы будет вплотную касаться края экрана, что не всегда хорошо (правила хорошего тона верстки предполагают наличие небольших полей или отступов).

Чтобы решить эту проблему без использования медиа-запросов, просто вставляем в код конструкцию вида:

которую браузер воспроизводящего устройства будет интерпретировать приблизительно так: подогнать (отмасштабировать, уменьшить в данном случае) ширину страницы так, чтобы на экране viewport отображалась вся ширина (1024px) страницы.

Аналогично можно исправить ситуацию, когда дизайн слишком узок для того или иного устройства. Например, есть блок, с неадаптивной шириной 700 пикселей. При просмотре на устройстве с шириной экрана, скажем в 720 пикселей справа появится некрасивая полоса. Решить эту проблему также можно, воспользовавшись конструкцией типа

Разумеется, такое решение не отменяет использования медиа-запросов, но является довольно приятным дополнением к ним, позволяя, быстро подправить незначительные отклонения в представлении страницы на разных устройствах.

designcenter.org.ua

Проблема масштабирования адаптивной верстки на мобильных браузерах — Toster.ru

Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…

Наверное, все кто занимался адаптивной версткой (да и не только адаптивной), знают, что при отображении сайта на мобильной версии браузера (скажем, на размере экрана в ширину 480 точек), сайт не отображается в масштабе 1:1, а «ужимается» под размер окна браузера. Т.е. браузер уменьшает сайт до такого размера, чтобы он целиком уместился в окно браузера. Элементы сайта становятся мелкими, шрифты не читабельными. И пользователю приходится увеличивать (масштабировать) его вручную. Но меня то не устраивает такая ситуация. Я то делал адаптивную верстку с надеждой, что она отобразится в браузере в своем реальном размере и сожмется не за счет масштабирования страницы под размер окна, а именно за счет резиновости блоков. Внешний блок () сайта имеет максимальную ширину 900 пикс, с возможностью сжиматься до 320. Блоки внутри так же сжимаются, перестраиваются и т.д. – это не важно, т.к. речь не об этом. Так вот при сжатии окна браузера на ПК, при размере окна меньше 900 пикс, сайт начинает успешно сжиматься за счет прописанных в css размерах в процентах, медиа-запросов и т.д… А при открытии его на мобильном устройстве он остается в своих реальных размерах и пропорциях, но просто масштабируется до такой степени, чтобы уместиться в окно браузера.

Еще раз повторюсь, что проблема не нова, и возможно многим верстальщикам знакома и может я зря так разжевываю, но все же на всякий случай постарался описать подробно.

И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport

который говорит браузеру, что сайт должен отображаться как есть, не масштабироваться автоматически при первоначальной загрузке (потом пальцами, конечно, можно масштабировать, если не запретить это в том же мета-теге). И если, например, это не адаптивный сайт и ширина его больше ширины окна браузера, то он, конечно же, не уместится целиком, пользователю нужно будет либо уменьшать (масштабировать вручную) либо прокручивать. А если это адаптивный сайт, то он, как и было задумано верстальщиком, сожмется за счет резиновости блоков до ширины окна. Что в итоге и произошло с моим сайтом.

Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 1280 пикс.

Что же в итоге получилось. Сайт, максимальная ширина которого, напомню 900 пикс, отобразился в своем нормальной размере в 100% масштабе. Но размер экрана устройства 1280 пикс! И что в итоге получлось? А получилось, что сайт не занял всю ширину экрана, а занял свои законные 900 пикс. В итоге по краям остались поля примерно по 154 пикс ((1280-900)/2). Кто-то скажет, что это ж нормально. Ведь когда мы открываем сайт на ПК, с шириной экрана, скажем, те же 1280 точек, то естественно сайт не будет занимать всю ширину, а будет занимать положенные ему 900 пикс, которые заданы в CSS как максимальная ширина сайта (или фиксированная ширина, если это фиксированный макет).

Но на планшете то эта ситуация не кажется нормальной. Т.к. экран сам по себе все-таки маленький, по сравнению с десктопами, хоть разрешение у него и 1280 точек. Хотелось бы, чтобы сайт занимал максимум пространства этого экрана. На компе нам этого не нужно, т.к. 900 пикс на мониторе будут выглядеть нормально, благо размер пиксела у него побольше чем у планшета. А вот на планшете когда страница не занимает весь экран – это кажется дикостью (по крайней мере мне). И все дело в том самом мета-теге viewport, которым мы задали отображение сайта в реальном масштабе. Это помогало нам, когда размер сайта был меньше 900 точек, т.е. помогало нам не масштабировать его под размер экрана, а отображать в реальном размере. Но это мешает нам при размере экрана больше 900 точек, ведь тут как раз хочется, чтобы масштабирование сработало, чтобы сайт увеличился до размеров окна, т.е. по максимум использовал всю ширину экрана, ведь это ж все-таки мобильное устройство.

Я для сравнения загрузил старую версию этого сайта (дизайн полностью такой же, за тем исключением, что не адаптивный, а фиксированной ширины 900 пикс) и он при первоначальной загрузке занял всю ширину экрана. Ведь в нем я не использовал viewport.

В заключение хочу сказать, что тестировал пока только на самсунге. Боюсь предположить, что же будет на iPad, разрешение которого по широкой стороне в два раза больше самсунга, 2048 пикс. Неужели страница будет занимать меньше половины экрана (она ж 900 точек)?

Короче говоря, хотелось бы поинтересоваться у сообщества, сталкивался ли кто-нибудь с подобными проблемами. И можно ли это считать проблемой? Или это нормальное поведение, которое не нужно никак исправлять? Т.е. отобразился сайт в реальном масштабе. Если не занял весь экран, то клиент без проблем увеличит его уже пальцами, смасштабирует как надо?

Пытался найти способ как сделать так, чтобы при размере экрана меньше 900 пикс, viewport срабатывал бы, а при размере больше 900 пикс не срабатывал. Не нашел.

P.S. прошу прощения что не разместил этот текст в q&a, упустил этот момент, а теперь уже не могу поменять.

toster.ru

width против device-width / Блог компании PAYSTO / Хабрахабр

Довольно часто люди не понимают разницы между шириной (width) и шириной устройства (device-width) (и, более того, есть примеры с минимальной (min-device-width) и максимальной шириной устройства (max-device-width)), используя медиазапросы CSS. Это недопонимание приводит к написанию плохого кода и значительно большему количеству работы для разработчика. Этот вопрос очень часто встречается на форумах SitePoint, поэтому пришло время объяснить все подробнее. В этой статье будет затронута эта проблема, а также мы более подробно рассмотрим, какой вариант следует использовать, создавая отзывчивые сайты. Основные определения

Давайте определимся, что мы имеем ввиду, когда говорим о медиазапросах, основанных на «ширине» и «ширине устройства». Нижеприведенные цитаты взяты из статьи MDN о медиазапросах, и там есть такое определение «ширины»:

Свойство среды «ширина» (width) описывает ширину отображаемой поверхности устройства вывода (например, ширину окна документа или ширину окна страницы на принтере)

А вот так MDN определяют «ширину устройства»:

Описывает ширину устройства вывода (означая полный экран или страницу, а не только область отображения, такую как окно документа)

Так что же это на самом деле значит? Простыми словами, «ширина» и «ширина устройства» относятся к ширине устройства, а не всей ширине области просмотра, которая может быть абсолютно другим понятием. Все, что вас должно интересовать – это ширина области просмотра, вне зависимости от ширины устройства.

При этом основным различием между шириной и шириной устройства является то, что ширина устройства не всегда соответствует области просмотра определенного устройства.

Большинство планшетов и мобильных устройств не всегда имеют 1 пиксель устройства на 1 пиксель CSS. Например, вам стоит знать, что у iPhone 4 стандартная область обзора экрана составляет 640×960. Это означает, что на данном примере device-width iPhone4 равна 320×480. Дело в том, что Apple понимают, что не каждый сайт создан отзывчивым и пытается сделать хорошо всем, предоставив ширину около 980px для отображения десктопного варианта сайта. Это значит, что если нет метатега области обзора, iPhone4 берет сайт и отображает его, как если бы он был 980px в ширину, при этом втискивая его в экран шириной 320px, в результате чего с точки зрения пользователя сайт будет отображаться уменьшенным.

Начинаем

Для начала, как и во всех случаях превращения сайтов в отзывчивые и использования медиазапросов, тег области обзора meta необходимо поместить в раздел вашего сайта. Базовая стандартная версия приведена ниже.

Как только на нашей странице появится этот сниппет, если мы будем просматривать страницу на разных устройствах, будут срабатывать разные медиазапросы. Без этого, при просмотре страницы на определенном устройстве, она будет отображаться просто как уменьшенная версия страницы; устройство будет пытаться вжать целый сайт в экран шириной 320px. И это не есть хорошо ни для вас, ни для ваших пользователей! Пользователи не любят увеличивать сайт, чтобы увидеть контент, и они точно не хотят скроллить его туда-сюда.

Например, давайте возьмем iPhone 4, у которого стандартная ширина области просмотра 980px. Без тега meta ваши попытки использовать медиазапросы не приведут ни к чему, и устройство будет неправильно обращаться к стандартной области просмотра. Большинство медиазапросов рассчитано на 500px или меньше. Это обычно выполняется с помощью простого медиазапроса max-width. Без тега meta вы не получите эффекта от этого запроса, так как iPhone 4 будет продолжать отображать версию сайта шириной 980px. Давайте рассмотрим приведенный ниже пример:

body { background: white; } @media screen and (min-width: 980px) /* Desktop */ { body { background: red; } } @media screen and (max-width: 979px) /* Tablet */ { body { background: blue; } } @media screen and (max-width: 500px) /* Mobile */ { body { background: green; } }

Ниже прикреплены два скриншота, сделанные с помощью iPhone 4. На обеих страницах есть вышеуказанный CSS, но на одной используется тег области просмотра meta, а на другой нет.

Показанная выше страница не содержит тега meta, и, в результате, фон отображается красным и имитирует стандартную область просмотра шириной 980px, вместо того, чтобы использовать мобильный медиазапрос на 500px.

В этом случае метатег на месте и iOS корректно отображает страницу такой, какой мы хотим: она основана на ширине 320px и позволяет нашим медиазапросам работать таким образом, как мы ожидаем.

Почему следует выбирать device-width?

Честно говоря, заголовок этой статьи изначально подразумевает неиспользование device-width. Однако для device-width есть свое место. Если вы делаете сайт для определенных устройств, тогда да – вам следует использовать device-width.

С точки зрения CSS и RWD, хороший сайт – это тот, который на самом деле «агностичен к устройству» и не пытается потакать ширине каждого отдельного девайса. Таргетинг на отдельные контрольные точки для различных «типов» устройств (например, планшетов или мобильных телефонов) достигается путем фокусирования на то, как контент отображается на определенной ширине области просмотра, а потом путем внесения соответствующих изменений в медиазапросы. Поэтому не устройство диктует контрольные точки, а макет и контент, и в конечном итоге это может привести к оптимальным результатам, как с вашей точки зрения, так и с точки зрения пользователей.

Это может и быть той причиной, почему у стольких людей проблемы с созданием отзывчивого дизайна, и почему они жалуются, что это сложно. Но если они пытаются создавать дизайн под отдельные устройства, они ввязываются в заведомо проигрышную битву: количество устройств, которые необходимо учитывать (чтобы охватить всё), слишком огромное и просто сводит все к плохому коду. Также стоит упомянуть, что если вы решили использовать device-width, вы также должны задавать отдельные правила для ориентации (книжная или альбомная): ширина устройства не изменяется только из-за того, что вы повернули устройство на бок. Для этого нужно еще больше кода, а это означает еще больше головной боли.

Однако давайте посмотрим на другой возможный вариант

Что насчет “width”?

Я придерживаюсь мнения, как и многие опытные разработчики, что полностью отзывчивая страница, которая ведет себя так, как от нее ожидают, на всех возможных размерах экранов – это самый простой и наиболее выгодный способ получить наиболее эффективный для всех устройств макет.

Чтобы создать полностью отзывчивую и гибкую страницу, разработчик должен просто обеспечить, чтобы учитывались все области просмотра, а страница изменяла структуру и размер при необходимости в соответствии с контентом и дизайном.

Все что вам нужно для полностью отзывчивой страницы – это гибкий сайт и немного продуманных медиазапросов для таргетирования на стандартный ряд мобильных устройств, планшетов, компьютеров + области просмотра. Я предпочитаю использовать Foundation’s Media Queries, которые являются наиболее точными и охватывают все необходимые области просмотра.

Конечно, как и все в разработке, использование только запросов на основе ширины не является решением всех проблем с макетом. Это скорее необходимо для тестирования на мобильных устройствах в поисках различных багов и странностей отображения. Но, имея возможность видеть, как все будет отображаться на различных мобильных устройствах – это так же просто, как изменять размер окна вашего браузера.

Для тестирования я использую расширение для Chrome Responsive Web Design Tester. Оно позволяет выбирать определенное устройство. Вы увидите размер устройства и то, как ваша страница будет отображаться на таком устройстве.

Еще одно небольшое преимущество, которое хотелось бы упомянуть, это что использование запросов на базе ширины гарантирует, что будущие устройства будут отображать сайт полноценно. Это довольно перспективный подход, так как вы ориентируетесь на что-то более глобальное – общий размер области просмотра – а не на определенное устройство.

В заключение

Вы все еще планируете использовать device-width в медиазапросах? Приведенные аргументы оказались недостаточно убедительными? Использование обычной «ширины» и области просмотра устройства упрощает отзывчивый дизайн и в конечном итоге является лучшим вариантом, который следует использовать практически всегда.

Полезные решения Paysto для читателей Хабра:

habrahabr.ru

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design)

Я уверен, что многие используют мета-тег Viewport для масштабирования дизайна, но знаете ли вы, что этот тег также может быть очень полезен для мобильных устройств? Если у вас нет времени, чтобы преобразовать ваш проект, тем не менее, вам следует прочитать эту статью о том, как использовать тег Viewport для улучшения внешнего вида вашего проекта на мобильных устройствах.

Главное использование тега Viewport

Viewport мета-тег, как правило, используется для масштабирования дизайна, чтобы установить ширину и высоту окна на мобильных устройствах. Ниже приведен пример тега Viewport.

Использование тега Viewport для сайтов, не рассчитанных под мобильные устройства.

Как вы знаете, по умолчанию ширину окна просмотра на iPhone является 980px. Но ваш дизайн может не поместиться в этом диапазоне. Он может быть шире или уже. Ниже приведены два примера, где Вы можете использовать эти теги для улучшения отображения вашего сайта на мобильных устройствах.

Пример

Взгляните на сайт Themify на iPhone.

На скриншоте слева показывается, как сайт будет выглядеть без тега. Как вы можете видеть, страница касается обеих сторон. Веб-мастер добавил Viewport тег, чтобы задать ширину окна 1024px, поэтому он оставляет некоторый запас пространства на левой и правой сторонах.

Другой пример.

Если ваш проект является слишком узким, это может также вызвать проблемы. Допустим, ширина контейнера вашего дизайна 700px, и это не правильно, это будет выглядеть как на скриншоте слева, где есть большое пустое пространство справа.

Вы можете просто исправить это, установив ширину окна в 720px. Ширина вашего дизайна не меняется, но iPhone будет масштабировать, чтобы поместиться в 720px.

Распространенная ошибка

Распространенной ошибкой является то, что люди часто добавляют initial-scale=1 на не отвечающий размерам дизайн. Это делает страницу в масштабе 100% без масштабирования. Если ваш проект не помещается на экран, пользователям придется уменьшить масштаб, чтобы увидеть полную страницу. Еще хуже, когда объединяют user-scalable=no или maximum-scale=1 с initial-scale=1. Это будет отключать возможность масштабирования. Пользователи не имеют возможности уменьшить размер страницы, чтобы увидеть ее.

Помните: если ваш проект не отвечает размерам окна и не сбрасывает initial-scale, то отключите масштабирование!

wpandyou.ru

Мета-тег viewport.

Вы здесь: Главная - HTML - HTML 5 - Мета-тег viewport.

Привет всем и сегодня мы поговорим о том, что такое viewport и как его использовать.

Для того, чтобы понять, что это такое, вам нужно какое-нибудь мобильное устройство. Теперь давайте создадим простую html страничку такого содержания:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <h5>test post</h5> <p>this is a test post</p> <h5>another post</h5> <p>this is pretty cool</p> <a href="#">New Post</a> </body> </html>

Теперь откроем нашу страницу на мобильном устройстве и что мы увидим? А увидим мы, что текст слишком маленький и читать его сложно. Однако, если мы добавим тег viewport следующего содержания в тег head

То теперь текст выглядит нормально. Вот рисунок. Слева без тега viewport, а справа с ним

Почему же так происходит? Дело в том, что браузер по-умолчанию думает, что сайт сделан для десктопной версии браузера и пытается полностью вместить его в окно вашего смартфона. Задав же тег viewport, мы говорим браузеру телефона, что ширина просмотра равна ширине смартфона. Вот такой простой тег, но он очень помогает при создании мобильной версии сайта.

Также можно задать масштаб. Для этого используется inital-scale

Если вы хотите запретить пользователю изменять масштаб страницы на его смартфоне, то можете прописать следующее:

Но нужно быть аккуратным, т.к. бывает, что текст достаточно трудно прочитать и приходится его увеличивать, но если это будет запрещено, то вы доставите неудобства пользователю.

Поддержка браузерами

Android поддерживает, но до версии 2.2. начальный масштаб равен 1.0

Symbian, Nokia 40 серии, Motorola, Opera mobile/mini и NetFront не поддерживают

IE поддерживает с 6 версии

BlackBerry поддерживает с версии 4.2.1

Как вы можете видеть, поддержка пока что неполная, но вы уже можете использовать этот тег, т.к. большинство новых смартфонов уже его понимают.

Итак, на этом я заканчиваю эту статью, спасибо за внимание.

Создано 02.06.2014 17:57:43
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка: <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru//images/button.gif" alt="Как создать свой сайт" /></a>
Она выглядит вот так:
Текстовая ссылка:<a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи): [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

myrusakov.ru